import React from 'react';
//使用react中的context高级ap来进行跨组件传递
//1.创建一个context
//2.解构出Provider Consumer
// React.createContext表示定义context的默认值
let {Provider,Consumer} = React.createContext({
    msg:'1111111111111111111111111',
    color:'pink'
})
//只有在没有Provider组件的时候,才会启用默认值
function A (props){
    return(
        <fieldset>
            <legend>a组件</legend>
            a组件
            <Provider value={{msg:'2222222222222',color:'blue'}}> 
            {/* procider表示的是提供的意思 */}
            <B/>
            </Provider>
        </fieldset>
    )
}
function B (props){
    return(
        <fieldset>
            <legend>B组件</legend>
            B组件
            <C/>
        </fieldset>
    )
}
function C (props){
    return(
        <fieldset>
            <legend>C组件</legend>
            C组件
            <D/>
        </fieldset>
    )
}
function D (props){
    return(
        <fieldset>
            <legend>D组件</legend>
            D组件
            {/* 接受通过procider传来的内容 */}
            <Consumer>
                {
                    p=>{
                        console.log(p);//打印的结果就是上面传递过来的信息
                        return (
                            <h1 style={{color:p.color}}>{p.msg}</h1>
                        )
                    }
                }
            </Consumer>
        </fieldset>
    )
}
export default A